<template>
  <!-- 增加条件判断，避免 data 未定义或为空时出错 -->
  <div v-if="props.filesData && props.filesData.length">
    <yk-text v-for="fileItem in props.filesData" :key="fileItem.id" class="file-item">
      <div class="file-item_img" :class="{ 'file-item_selected': fileItem.selected }">
        <yk-image :src="`${baseImgPath}/${fileItem.url}`" width="200" height="200px" :is-lazy="true" fit="contain"
          :preview="false"></yk-image>
        <yk-space class="file-item_img-tool" size="s">
          <IconDeleteOutline class="files_tool-delete" @click="fileDelete(fileItem.id,fileItem.url)" />
          <yk-popconfirm title="选择分组" placement="bottomRight" trigger="click" :arrow="false" @cancel="cancel"
            @confirm="confirm(fileItem.id)">
            <IconSwitchOutline class="file_tool-switch" @click="subsetChange(fileItem.subset_id)" />
            <template #content>
              <yk-scrollbar ref="scrollbar" height="148px" class="subset">
                <div v-for="subsetItem in  subsetStore.data" class="subset_item" :key="subsetItem.id"
                  :class="{ 'subset_selected': subsetSelectedId === subsetItem.id }" @click="subsetChange(subsetItem.id)">
                  {{ subsetItem.name }}</div>
              </yk-scrollbar>
            </template>
          </yk-popconfirm>
        </yk-space>
        <div class="file-item_img-check" @click="fileCheck(fileItem.id)">
          <IconTickMinOutline style="color: #fff;font-size: 22px;" />
        </div>
      </div>
      <p class="file-item_name">
        {{ fileItem.url }}
      </p>
    </yk-text>
  </div>

</template>
<script setup lang="ts">
import { ref, defineProps, onMounted, defineEmits } from "vue";
import type { fileData } from "../../utils/interface";
// import { subset } from '../../mock/data';
import { baseImgPath } from '../../utils/env'; // 导入图片路径
import './files.less';
import { useSubsetStore } from '../../stores/subset';

const subsetStore = useSubsetStore();

// 类型定义放在前面，方便统一管理

type FilesItemProps = {
  filesData?: fileData[],
}

// 定义 props 和 emits
const props = withDefaults(defineProps<FilesItemProps>(), {
  // 设置默认值为空数组
  filesData: () => [],
})

const emits = defineEmits(['subsetIdChange', 'fileDelete', 'fileCheck'])

// 定义响应式数据
// 分类选择
const subsetSelectedId = ref<number | string>();

// 定义函数
// 取消操作，目前为空实现
function cancel() {

}

// 确认操作，当分类选择 ID 匹配时触发事件
function confirm(fileId: number) {
    let data = {
      id: fileId,
      subsetId: subsetSelectedId.value,
    }
    emits("subsetIdChange", data)
}

// 切换分组
const subsetChange = (e: number | undefined) => {
  subsetSelectedId.value = e;
}

// 删除操作，触发删除事件并打印日志
const fileDelete = (e: number,url:string) => {
  emits("fileDelete", e,url)
}

// 选择操作，触发选择事件
const fileCheck = (e: number) => {
  emits("fileCheck", e)
}

// 生命周期钩子
onMounted(() => {

})
</script>
<style scoped lang="less">
.file-item {
  &_img {
    position: relative;
    background-color: @pcolor-1;
    border: 2px solid @bg-color-l;
    width: 200px;
    height: 200px;
    cursor: pointer;
    border-radius: @radius-s;

    &:hover {
      background: @pcolor-1;

      .file-item_img-tool {
        opacity: 1;
      }

      .file-item_img-check {
        opacity: 1;
      }
    }

    &-tool {
      position: absolute;
      bottom: @space-s;
      right: @space-s;
      opacity: 0;

      .yk-icon {
        width: 32px;
        height: 32px;
        padding: 8px;
        background: rgba(255, 255, 255, 0.56);
        border-radius: @radius-m;
        transition: all @animatb;

        &:hover {
          color: @pcolor;
          background: rgba(255, 255, 255, 0.72);
          backdrop-filter: blur(2px);
        }
      }
    }

    &-check {
      width: 24px;
      height: 24px;
      position: absolute;
      border-radius: @radius-s;
      background: @gray-4;
      top: @space-s;
      left: @space-s;
      border: 1px solid rgba(255, 255, 255, 0.56);
      opacity: 0;

      .yk-icon {
        opacity: 0;
      }
    }
  }

  &_selected {
    background: @pcolor-1;
    border: 2px solid @pcolor-3;

    .file-item_img-check {
      opacity: 1;
      background: @pcolor;

      .yk-icon {
        opacity: 1;
      }
    }

    .file-item_img-tool {
      opacity: 0;
    }
  }

  &_name {
    margin-top: @space-l;
    //  color: @pcolor;
    text-align: center;
  }
}
</style>